<template>
  <section>
    <div class="verify-wrapper">
      <upload-file :xlsx-data.sync="xlsxData" :query-params="queryParams" :verify-method="massCertified" />
      <el-button type="primary" @click="dialogFormVisible=true" style="margin-top:2px;">单个验证</el-button>

      <div class="upload-tips">excel文件包含 手机号、姓名、身份证、银行卡号 等4项数据</div>
    </div>

    <editable-table :table-data="statusData" />

    <el-dialog title="信息验证" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" prop="name" label-width="120px">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" label-width="120px">
          <el-input v-model.number="form.mobile" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="cardNo" label-width="120px">
          <el-input v-model="form.cardNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankcard" label-width="120px">
          <el-input v-model.number="form.bankcard" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import axios from 'axios'
import UploadFile from '@/components/UploadFile'
import EditableTable from '@/components/EditableTable'

const emptyForm = {
  name: null,
  mobile: null,
  cardNo: null,
  bankcard: null
}

const APPKEY = '87e3c1115c4632921362e42a8c6004d3'

const name = /[\u4e00-\u9fa5]{2,6}/
const mobile = /^1\d{10}$/
const cardNo = /\d{15}(\d\d[0-9xX])?/
const bankcard = /\d{16,19}/

export default {
  components: { UploadFile, EditableTable },
  data () {
    const validator = (re, tips) => (rule, value, callback) => {
      if (re.test(value)) {
        callback()
      } else {
        callback(new Error(tips));
      }
    };
    return {
      dialogFormVisible: false,
      queryParams: [
        { label: '姓名', key: 'name' },
        { label: '手机号', key: 'mobile' },
        { label: '身份证', key: 'cardNo' },
        { label: '银行卡号', key: 'bankcard' },
      ],
      xlsxData: [],
      form: Object.assign({}, emptyForm),
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: validator(mobile, '手机号格式错误'), trigger: 'blur' }
        ],
        cardNo: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          { validator: validator(cardNo, '身份证格式错误'), trigger: 'blur' }
        ],
        bankcard: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          { validator: validator(bankcard, '银行卡号格式错误'), trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    statusData () {
      const validator = (re, value) => re.test(value)
      return this.xlsxData.map(item => Object.assign({}, item,
        { status: validator(name, item.name) && validator(mobile, item.mobile) && validator(cardNo, item.cardNo) && validator(bankcard, item.bankcard) }))
    }
  },
  watch: {
    dialogFormVisible (value) {
      if (!value) {
        this.form = Object.assign({}, emptyForm)
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.validate(formName).then(() => {
        const { model } = this.$refs[formName]
        return this.bankCertified(this.renameForBank(model))
      }).then(res => {
        console.log(res)
      })
    },
    renameForBank (data) {
      const { name, mobile, cardNo, bankcard } = data
      return { mobile, cardNo, bankcard, realName: name }
    },
    validate (formName) {
      return this.$refs[formName].validate()
    },
    bankCertified (data, appkey = APPKEY) {
      axios.get('https://way.jd.com/jiashudata/bank?', { params: Object.assign({}, data, { appkey }) })
    },
    massCertified () {
      const list = this.statusData.filter(item => item.status).map(item => this.renameForBank(item));
      list.map(item => this.bankCertified(item))
    }
  }
}
</script>

<style>
.verify-wrapper {
  margin-bottom: 8px;
}
.upload-tips {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 20px;
}
</style>
